import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { UserCollectSongWrap } from "./style";
import { userPlaylistAction } from "../../../store/actionTypes";
import { getSizeImage, getCount } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";

export default memo(function UserCollectSong(props) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(userPlaylistAction(props.id, 100));
  }, [dispatch, props.id]);
  const { userDetailInfo, userPlaylistInfo } = useSelector(
    (state) => ({
      userDetailInfo: state.getIn(["userInfo", "userDetailInfo"]),
      userPlaylistInfo: state.getIn(["userInfo", "userPlaylistInfo"]),
    }),
    shallowEqual
  );
  const playListInfo =
    userPlaylistInfo.code == 200 && userPlaylistInfo.playlist;
  const dbname =
    userDetailInfo.code == 200 ? userDetailInfo.profile.nickname : "";
  const nickName = (nickname) => {
    return nickname == dbname;
  };
  const createPlaylistNum = playListInfo
    ? playListInfo.map((item, index) => {
        return item.creator.nickname;
      })
    : "";
  const createListNum =
    createPlaylistNum !== "" ? createPlaylistNum.filter(nickName).length : "";
  const collectListNum = playListInfo
    ? playListInfo.length - createListNum
    : "";

  return (
    <UserCollectSongWrap>
      {playListInfo.length !== 0 ? (
        <div>
          {createListNum == 0 ? (
            <React.Fragment></React.Fragment>
          ) : (
            <div
              style={{ marginBottom: "20px" }}
              className="user-audio-p clear"
            >
              <span>
                {userDetailInfo.code == 200
                  ? userDetailInfo.profile.nickname
                  : ""}
                创建的歌单（{createListNum}）
              </span>
            </div>
          )}
          <div className="clear">
            {createListNum == 0 ? (
              <React.Fragment></React.Fragment>
            ) : playListInfo ? (
              playListInfo.slice(0, createListNum).map((item, index) => {
                return (
                  <div className="img-box sprite_covor" key={index}>
                    <div className="img-box-r">
                      <img src={getSizeImage(item.coverImgUrl, 140)} alt="" />
                      <div className="img-cover-a sprite_covor">
                        <i className="erji sprite_icon"></i>
                        <span className="ttxt">{getCount(item.playCount)}</span>
                        <a className="bofang sprite_icon">1</a>
                      </div>
                      <NavLink
                        to={{
                          pathname: "/discover/playlist/" + item.id,
                        }}
                        className="h-cov sprite_covor"
                        title={item.name}
                      >
                        {item.name}
                      </NavLink>
                    </div>

                    <NavLink
                      to={{
                        pathname: "/discover/playlist/" + item.id,
                      }}
                      className="itemName"
                      title={item.name}
                    >
                      {item.name}
                    </NavLink>
                  </div>
                );
              })
            ) : (
              ""
            )}
          </div>
          {collectListNum == 0 ? (
            <React.Fragment></React.Fragment>
          ) : (
            <div
              style={{ marginBottom: "20px" }}
              className="user-audio-p clear"
            >
              <span>
                {userDetailInfo.code == 200
                  ? userDetailInfo.profile.nickname
                  : ""}
                收藏的歌单（{collectListNum}）
              </span>
            </div>
          )}
          <div className="clear">
            {collectListNum == 0 ? (
              <React.Fragment></React.Fragment>
            ) : playListInfo ? (
              playListInfo
                .slice(createListNum, collectListNum + createListNum)
                .map((item, index) => {
                  return (
                    <div className="img-box sprite_covor" key={index}>
                      <div className="img-box-r">
                        <img src={getSizeImage(item.coverImgUrl, 140)} alt="" />
                        <div className="img-cover-a sprite_covor">
                          <i className="erji"></i>
                          <span className="ttxt">
                            {getCount(item.playCount)}
                          </span>
                          <a className="bofang">1</a>
                        </div>
                        <NavLink
                          to={{
                            pathname: "/discover/playlist/" + item.id,
                          }}
                          className="h-cov"
                          title={item.name}
                        >
                          {item.name}
                        </NavLink>
                      </div>

                      <NavLink
                        to={{
                          pathname: "/discover/playlist/" + item.id,
                        }}
                        className="itemName"
                        title={item.name}
                      >
                        {item.name}
                      </NavLink>
                    </div>
                  );
                })
            ) : (
              ""
            )}
          </div>
        </div>
      ) : (
        <div className="n-nmusic">
          <h3 className="n-music-h3">
            <i className="u-music-h3-i"></i>
            暂无数据!
          </h3>
        </div>
      )}
    </UserCollectSongWrap>
  );
});
